<template>
  <div class="learnIndex">
    <div class="info">
      <div>
        <p>{{name}}</p>
        <p>
          学习总时长
          <span>{{(data.total_duration/3600).toFixed(2)}}</span>
          <span>小时</span>
        </p>
      </div>

      <img :src="photo" alt />
    </div>
    <p class="des">最近7天的学习时长 / 单位：分钟</p>
    <div id="myChart" :style="{width: '100%', height:'200px'}"></div>

    <img class="boxTop" src="@as/img/xuexi_shujufenxi_bg@2x.png" alt />
    <div class="box" :class="{'shareComponent':shareIos}">
      <div class="minbox">
        <div>
          <i class="iconfont iconxuexi_shuju_icon_bijishu"></i>
          <span>我的笔记数</span>
        </div>
        <span class="dec">
          {{data.note_numbers}}
          <span>条</span>
        </span>
      </div>

      <div class="minbox">
        <div>
          <i class="iconfont iconxuexi_shuju_icon_yinpinshu"></i>
          <span>我的音频学习数</span>
        </div>
        <span class="dec">
          {{data.audio_numbers}}
          <span>节</span>
        </span>
      </div>
      <div class="minbox">
        <div>
          <i class="iconfont iconxuexi_shuju_icon_shipinshu"></i>
          <span>我的视频学习数</span>
        </div>
        <span class="dec">
          {{data.video_numbers}}
          <span>节</span>
        </span>
      </div>
      <div class="minbox">
        <div>
          <i class="iconfont iconxuexi_shuju_icon_zhuantishu"></i>
          <span>我的专题学习数</span>
        </div>
        <span class="dec">
          {{data.special_numbers}}
          <span>篇</span>
        </span>
      </div>
      <div class="minbox">
        <div>
          <i class="iconfont iconxuexi_shuju_icon_dakatianshu"></i>
          <span>打卡天数</span>
        </div>
        <span class="dec">
          {{data.clock_days}}
          <span>天</span>
        </span>
      </div>

      <div class="minbox">
        <div>
          <i class="iconfont iconxuexi_shuju_icon_lianxutianshu"></i>
          <span>连续学习</span>
        </div>
        <span class="dec">
          {{data.continuity_days}}
          <span>天</span>
        </span>
      </div>
    </div>
    <share :shareData="shareData"  v-if="shareIos"  :bgColor="bgColor" class="sharePage" />
  </div>
</template>

<script>
import share from "@views/home/components/share";
export default {
  components: {
    share
  },
  data() {
    return {
      shareData: [],
      bgColor: {
        swiperColor: "#fff",
        codeColor: "transparent"
      },
      shareIos: false,
      isAndroid: false,
      orgnation_id: "",
      isIOS: false,
      phone:'',

      name:Cookies.get("user_71ydj")? JSON.parse(Cookies.get("user_71ydj")).name:this.name,
      photo: Cookies.get("user_71ydj")? JSON.parse(Cookies.get("user_71ydj")).photo:this.photo,
      data: {}
    };
  },
  created() {
    if (this.$route.query.fromIos) {
      this.shareIos = true;
      this.orgnation_id = this.$route.query.orgnation_id;
      this.phone = this.$route.query.phone;
      this.name = this.$route.query.name;
      this.photo =this.$route.query.photo
    }
  },
  mounted() {
    this.init();
    var u = navigator.userAgent,
      app = navigator.appVersion;
    var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isAndroid) {
      //这个是安卓操作系统
      this.isAndroid = true;
      this.isIos = false;
      if (this.shareIos) {
        this.getAdShare(6);
      }
    }
    if (isIOS) {
      this.isAndroid = false;
      this.isIos = true;
      if (this.shareIos) {
        this.getAdShare(5);
      }
    }
  },
  methods: {
    getAdShare(id) {
      this.$http
        .get("app/My/add_list", {
          org_id: this.orgnation_id,
          position: id
        })
        .then(res => {
          if (res.code == 200) {
            if (res.data.length > 0) {
              this.shareData = res.data;
            } else {
              this.shareData = [
                {
                  photo:
                    "https://media.71ydj.com/17cd567662bafc8d63d73d41444585d2.jpg",
                  link: "https://apps.apple.com/cn/app/id1434639733",
                  remarks: "中纺机党建云"
                }
              ];
            }
          }
        });
    },
    init() {
      this.$http
        .get("/applets/StudyPlay/study_plan_record", {
          phone: Cookies.get("user_71ydj")
            ? JSON.parse(Cookies.get("user_71ydj")).phone
            : this.phone
        })
        .then(res => {
          this.data = res.data;
          this.drawLine();
          this.$progress.done();
        });
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        toolbox: {
          show: true
        },
        textStyle: {
          color: "white"
        },
        xAxis: [
          {
            data: [...this.data.date],
            axisTick: {
              show: false //想要不显示网格线，改为false
            },
            axisLine: {
              show: false //想要不显示网格线，改为false
            },
            splitLine: {
              show: true,
              lineStyle: { color: "rgba(255,255,255,.1)" }
            },
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            show: false,
            axisTick: {
              show: false //想要不显示网格线，改为false
            }
          }
        ],
        grid: {
          top: "20%",
          left: "0%",
          right: "10%",
          bottom: "3%",
          containLabel: true
        },
        series: [
          {
            smooth: true,
            name: "学习时间",
            type: "line",
            stack: "总量",
            symbol: "circle",
            symbolSize: "6",

            data: [...this.data.second],
            textStyle: {
              normal: {
                color: "#fff"
              }
            },
            lineStyle: {
              normal: {
                color: "#fff"
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: function(v) {
                    return Math.ceil(v.value / 60) + "分";
                  }
                },
                color: "#eb4d44",
                borderColor: "#fff",
                borderWidth: 1,
                lineStyle: {
                  color: "#fff"
                }
              }
            },
            encode: {
              // 将 "amount" 列映射到 X 轴。
              x: "amount",
              // 将 "product" 列映射到 Y 轴。
              y: "product"
            }
          }
        ]
      });
    }
  }
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.learnIndex {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(#eb4d44, #f47548);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info {
  margin-top: 34px;
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  & > div {
    p {
      font-size: 28px;
      color: #fff;
      font-weight: 400;
    }
    p + p {
      font-size: 14px;
      color: #fff;
      font-weight: 400;
      span {
        font-size: 18px;
      }
      span + span {
        font-size: 12px;
      }
    }
  }
}

.boxTop {
  margin-top: 30px;
  width: 80%;
  height: auto;
}
.box {
  margin-bottom: 100px;
  width: 80%;
  height: 300px;
  background: #fff;
  border-radius: 6px;
  padding: 20px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .minbox {
    width: 90%;
    height: 100px;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;

    i {
      color: #ccc;
      margin: 10px;
    }
    .dec {
      font-weight: bold;
      color: #f47548;
      font-size: 18px;
      span {
        font-weight: Medium;
        color: #aaaaaa;
        font-size: 12px;
      }
    }
  }
}

.des {
  margin-top: 20px;
  width: 80%;
  font-weight: Medium;
  color: rgba(255, 255, 255, 0.2);
  font-size: 10px;
}
.sharePage{
  position: static
}
</style>